<template>
    <!-- 文件上传 -->
    <div class="uploads flex">
        <div class="imgViews">
            <div
                    class="imgWarps_item"
                    v-for="(item,index) in filesList"
                    :key="index"
            >
                <!-- <img :src="item" alt /> -->
                <el-image
                        class="img"
                        :src="item"
                        :preview-src-list="filesList"
                        fit="contain"
                />
                <div class="btns">
                    <i :class="disabled ? 'cursor-not-allowed' : ''" class="el-icon-delete" title="删除"
                       @click="deleteFile(index)"></i>
                    <!-- <i class="el-icon-view" title="查看" @click="handlePictureCardPreview(item)"></i> -->
                </div>
            </div>
            <el-upload
                    v-loading="loading"
                    :element-loading-text="loadingText"
                    ref="euplaod"
                    action
                    :http-request="uploadFiles"
                    :on-change="handleChange"
                    :before-upload="beforeUpload"
                    :show-file-list="ShowFilelist"
            >
                <slot name="trigger">
                    <div class="upload_files" :class="disabled ? 'cursor-not-allowed' : ''">
                        <i class="el-icon-plus"></i>
                    </div>
                </slot>
                <slot name="tip" slot="tip"></slot>
            </el-upload>
        </div>

        <!-- <el-dialog title="图片详情" :visible.sync="dialogVisible" :append-to-body="true">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog> -->
    </div>
</template>
<script>
    import axios from 'axios'
    import { _getUploadUrl, _downloadUrl } from '_api'
    export default {
        name: 'EUploads',

        props: {
            limit: {
                type: Number,
                default: 1000,
            },
            ShowFilelist: {
                type: Boolean,
                default: false,
            },
            fileType: {
                type: Array,
                default: () => ['png', 'jpg', 'jpeg'],
            },
            size: {
                type: Number,
                default: 0, //默认不限制大小
            },
            files: {
                type: [Array, String],
                default: () => [],
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        model: {
            prop: 'files',
            event: 'file-upload',
        },
        watch: {
            files: {
                handler(val) {
                    if (Array.isArray(val)) {
                        this.filesList = val
                    } else if (val) {
                        this.filesList = [val]
                    } else {
                        this.filesList = []
                    }
                },
                immediate: true,
            },
            filesList(val) {
                this.$emit('file-upload', val)
            }
        },
        data() {
            return {
                loading: false,
                loadingText: '上传中...',
                filesList: [],
                dialogVisible: false,
                dialogImageUrl: '',
            }
        },
        methods: {
            //自定义上传
            uploadFiles(file) {
                if (this.disabled) return
                this.loading = true
                _getUploadUrl(file.file.name).then((res) => {
                    if (res.data) {
                        let fileUrl = res.data
                        axios({
                            method: 'put',
                            url: fileUrl,
                            data: file.file,
                            headers: {
                                'Content-Type': 'application/octet-stream'
                            }
                        }).then(() => {
                            _downloadUrl(fileUrl).then((res) => {
                                this.loading = false
                                this.filesList.push(res.data)
                            }).catch(()=>{
                                this.loading = false
                            })
                        })
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            //上传之前的钩子
            beforeUpload(file) {
                if (this.limit <= this.filesList.length) {
                    this.$message.error(`只能上传${this.limit}张`)
                    return false
                }
                if (this.size != 0 && file.size > this.size * 1024 * 1024) {
                    this.$message.error(`文件大小不能超过${this.size}M`)
                    return false
                }
            },
            //文件改变的钩子
            handleChange(file, files) {
                console.log('upload handleChange', file, files)
            },
            //删除
            deleteFile(index) {
                if (this.disabled) return
                this.filesList.splice(index, 1)
            }
        },
    }
</script>

<style lang="less" scoped>
    .uploads {
        flex-wrap: wrap;

        .imgViews {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 70px;
            flex-wrap: wrap;

            .imgWarps_item {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 70px;
                height: 70px;
                border-radius: 15px;
                margin-right: 15px;
                border: 1px dashed #c0ccda;
                position: relative;
                margin-bottom: 15px;

                .img {
                    border-radius: 15px;
                    width: 100%;
                    height: 100%;
                }

                &:hover {
                    border: 1px dashed #409eff;

                    .btns {
                        display: flex;
                    }
                }

                .btns {
                    display: none;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    color: #000;
                    font-size: 14px;

                    i {
                        cursor: pointer;
                        margin-left: 10px;

                        &:first-child {
                            margin-left: 0;
                        }

                        &:hover {
                            color: #409eff;
                        }
                    }
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .upload_files {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 24px;
        border: 1px dashed #c0ccda;
        border-radius: 15px;
        margin-bottom: 15px;

        &:hover {
            border-color: #409eff;
            color: #409eff;
        }
    }

    .cursor-not-allowed {
        cursor: not-allowed !important;
    }
</style>
